<template>
	<view>
		<view class="container__warpswiper__row__ul box-green pad" id="yxym">
			<!-- 2024年属性知识 -->
			<view>2024年属性知识</view>
			<view class="duilianpt">
				<u-row justify="space-between" gutter="10">
					<u-col span="12">
						<view class="text-center"><text>2024龍年（十二生肖号码对照）</text></view>
					</u-col>
				</u-row>
			
				<u-grid :border="false">
					<u-grid-item v-for="(animal, baseListIndex) in animals" :key="baseListIndex">
						<view class="zodiac grad">
							<view class="zodiac-title">
								{{ animal.name }}
								<u--image :showLoading="true" :src="animal.image" width="80rpx" height="80rpx"></u--image>
								[{{ animal.chong }}]
							</view>
							<view class="zodiac-numbers">
								<text
									v-for="(number, i) in animal.numbers"
									:key="i"
									:class="{ red: number.color === 'red', blue: number.color === 'blue', green: number.color === 'green' }"
								>
									{{ number.value }}
								</text>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- 2024五行对照 -->
			<view class="duilianpt">
				<u-row justify="space-between" gutter="10">
					<u-col span="12">
						<view class="text-center"><text>五行对照</text></view>
					</u-col>
				</u-row>
				<view class="duilianpt centent8">
					<u-row v-for="(element, index) in elements" :key="index" class="element-row">
						<u-col :span="2" class="element-title column-with-divider" :style="{ color: element.color, textAlign: 'center' }">{{ element.element }}</u-col>
						<u-col :span="10">
							<view class="numbers-container">
								<!-- :style="{ color: '#fff', backgroundColor: number.color.startsWith('#') ? number.color : 'red' }" -->
								<text
									v-for="number in element.numbers"
									:key="number.value"
									:class="{ red: number.color === '', blue: number.color === 'blue', green: number.color === 'green' }"
								>
									{{ number.value }}
								</text>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			
			<!-- 2024波色 -->
			<view class="duilianpt">
				<u-row justify="space-between" gutter="10">
					<u-col span="12">
						<view class="text-center"><text>波色</text></view>
					</u-col>
				</u-row>
				<view class="duilianpt centent8">
					<u-row v-for="(element, index) in waveColors" :key="index" class="element-row">
						<u-col :span="2" class="element-title" :style="{ color: element.color, textAlign: 'center' }">{{ element.name }}</u-col>
						<u-col :span="10" class="wave-colors">
							<view class="numbers-container">
								<text v-for="number in element.numbers" :key="number" :class="{ red: index === 0, blue: index === 1, green: index === 2 }">{{ number }}</text>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			
			<!-- 2024合数单双 -->
			<view class="duilianpt">
				<u-row justify="space-between" gutter="10">
					<u-col span="12">
						<view class="text-center"><text>合数单双</text></view>
					</u-col>
				</u-row>
				<view class="duilianpt centent8">
					<u-row v-for="(element, index) in compositeNumbers" :key="index" class="element-row">
						<u-col :span="2" class="element-title blue-text" :style="{ textAlign: 'center' }">{{ element.type }}</u-col>
						<u-col :span="10" class="wave-colors">
							<view class="numbers-container">
								<text
									v-for="(number, inx) in element.numbers"
									:key="inx"
									:class="{ red: number.color === '', blue: number.color === 'blue', green: number.color === 'green' }"
								>
									{{ number.value }}
								</text>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			
			<!-- 2024生肖属性 -->
			<view class="duilianpt">
				<u-row justify="space-between" gutter="10">
					<u-col span="12">
						<view class="text-center"><text>生肖属性</text></view>
					</u-col>
				</u-row>
				<view class="duilianpt centent8">
					<u-row v-for="(element, index) in zodiacAttributes" :key="index" class="element-row">
						<u-col :span="12" class="element-title blue-text" :style="{ textAlign: 'center' }">
							<view class="zodiacAttributes">
								{{ element.category }}:
								<text v-for="(number, inx) in element.animals" :key="inx" class="black-text">{{ number }}</text>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
export default {
	name: 'Animals',
	props: {
	    // 定义一个名为dataList的prop来接收数组数据
	    list: {
	      type: [Object,Array],
	      default: () => {
			  return {};
		  },
	    },
	  },
	  data(){
		  return {
			  animals: [],
			  elements: [
			  	{
			  		element: '金',
			  		color: '#ffcc00',
			  		numbers: [
			  			{ value: '02', color: '' },
			  			{ value: '03', color: 'blue' },
			  			{ value: '10', color: 'blue' },
			  			{ value: '11', color: 'green' },
			  			{ value: '24', color: '' },
			  			{ value: '25', color: 'blue' },
			  			{ value: '32', color: 'green' },
			  			{ value: '33', color: 'green' },
			  			{ value: '40', color: '' },
			  			{ value: '41', color: 'blue' }
			  		]
			  	},
			  	{
			  		element: '木',
			  		color: '#33cc33',
			  		numbers: [
			  			{ value: '06', color: 'green' },
			  			{ value: '07', color: '' },
			  			{ value: '14', color: 'blue' },
			  			{ value: '15', color: 'blue' },
			  			{ value: '22', color: 'green' },
			  			{ value: '23', color: '' },
			  			{ value: '36', color: 'blue' },
			  			{ value: '37', color: 'blue' },
			  			{ value: '44', color: 'green' },
			  			{ value: '45', color: '' }
			  		]
			  	},
			  	{
			  		element: '水',
			  		color: '#3399ff',
			  		numbers: [
			  			{ value: '12', color: '' },
			  			{ value: '13', color: '' },
			  			{ value: '20', color: 'blue' },
			  			{ value: '21', color: 'green' },
			  			{ value: '28', color: 'green' },
			  			{ value: '29', color: '' },
			  			{ value: '42', color: 'blue' },
			  			{ value: '43', color: 'green' }
			  		]
			  	},
			  	{
			  		element: '火',
			  		color: '#ff6600',
			  		numbers: [
			  			{ value: '01', color: '' },
			  			{ value: '08', color: '' },
			  			{ value: '09', color: 'blue' },
			  			{ value: '16', color: 'green' },
			  			{ value: '17', color: 'green' },
			  			{ value: '30', color: '' },
			  			{ value: '31', color: 'blue' },
			  			{ value: '38', color: 'green' },
			  			{ value: '39', color: 'green' },
			  			{ value: '46', color: '' },
			  			{ value: '47', color: 'blue' }
			  		]
			  	},
			  	{
			  		element: '土',
			  		color: '#cc9900',
			  		numbers: [
			  			{ value: '04', color: 'blue' },
			  			{ value: '05', color: 'green' },
			  			{ value: '18', color: '' },
			  			{ value: '19', color: '' },
			  			{ value: '26', color: 'blue' },
			  			{ value: '27', color: 'green' },
			  			{ value: '34', color: '' },
			  			{ value: '35', color: '' },
			  			{ value: '48', color: 'blue' },
			  			{ value: '49', color: 'green' }
			  		]
			  	}
			  ],
			  waveColors: [
			  	{
			  		name: '红波',
			  		color: '#ff0000',
			  		numbers: ['01', '02', '07', '08', '12', '13', '18', '19', '23', '24', '29', '30', '34', '35', '40', '45', '46']
			  	},
			  	{
			  		name: '蓝波',
			  		color: '#3366ff',
			  		numbers: ['03', '04', '09', '10', '14', '15', '20', '25', '26', '31', '36', '37', '41', '42', '47', '48']
			  	},
			  	{
			  		name: '绿波',
			  		color: '#009933',
			  		numbers: ['05', '06', '11', '16', '17', '21', '22', '27', '28', '32', '33', '38', '39', '43', '44', '49']
			  	}
			  ],
			  compositeNumbers: [
			  	{
			  		type: '合数单',
			  		numbers: [
			  			{ value: '01', color: '' },
			  			{ value: '03', color: 'blue' },
			  			{ value: '05', color: 'green' },
			  			{ value: '07', color: '' },
			  			{ value: '09', color: 'blue' },
			  			{ value: '10', color: 'blue' },
			  			{ value: '12', color: '' },
			  			{ value: '14', color: 'blue' },
			  			{ value: '16', color: 'green' },
			  			{ value: '18', color: '' },
			  			{ value: '21', color: 'green' },
			  			{ value: '23', color: '' },
			  			{ value: '25', color: 'blue' },
			  			{ value: '27', color: 'green' },
			  			{ value: '29', color: '' },
			  			{ value: '30', color: '' },
			  			{ value: '32', color: 'green' },
			  			{ value: '34', color: '' },
			  			{ value: '36', color: 'blue' },
			  			{ value: '38', color: 'green' },
			  			{ value: '41', color: 'blue' },
			  			{ value: '43', color: 'green' },
			  			{ value: '45', color: '' },
			  			{ value: '47', color: 'blue' },
			  			{ value: '49', color: 'green' }
			  		]
			  	},
			  	{
			  		type: '合数双',
			  		numbers: [
			  			{ value: '02', color: '' },
			  			{ value: '04', color: 'blue' },
			  			{ value: '06', color: 'green' },
			  			{ value: '08', color: '' },
			  			{ value: '11', color: 'green' },
			  			{ value: '13', color: '' },
			  			{ value: '15', color: 'blue' },
			  			{ value: '17', color: 'green' },
			  			{ value: '19', color: '' },
			  			{ value: '20', color: 'blue' },
			  			{ value: '22', color: 'green' },
			  			{ value: '24', color: '' },
			  			{ value: '26', color: 'blue' },
			  			{ value: '28', color: 'green' },
			  			{ value: '31', color: 'blue' },
			  			{ value: '33', color: 'green' },
			  			{ value: '35', color: '' },
			  			{ value: '37', color: 'blue' },
			  			{ value: '39', color: 'green' },
			  			{ value: '40', color: '' },
			  			{ value: '42', color: 'blue' },
			  			{ value: '44', color: 'green' },
			  			{ value: '46', color: '' },
			  			{ value: '48', color: 'blue' }
			  		]
			  	}
			  ],
			  zodiacAttributes: [
			  	{ category: '家禽', animals: ['牛', '马', '羊', '鸡', '狗', '猪'] },
			  	{ category: '野兽', animals: ['鼠', '虎', '兔', '龙', '蛇', '猴'] },
			  	{ category: '吉美', animals: ['兔', '龙', '蛇', '马', '羊', '鸡'] },
			  	{ category: '凶丑', animals: ['鼠', '牛', '虎', '猴', '狗', '猪'] },
			  	{ category: '阴性', animals: ['鼠', '龙', '蛇', '马', '狗', '猪'] },
			  	{ category: '阳性', animals: ['牛', '虎', '兔', '羊', '猴', '鸡'] },
			  	{ category: '单笔', animals: ['鼠', '龙', '马', '蛇', '鸡', '猪'] },
			  	{ category: '双笔', animals: ['虎', '猴', '狗', '兔', '羊', '牛'] },
			  	{ category: '天肖', animals: ['兔', '马', '猴', '猪', '牛', '龙'] },
			  	{ category: '地肖', animals: ['蛇', '羊', '鸡', '狗', '鼠', '虎'] },
			  	{ category: '白边', animals: ['鼠', '牛', '虎', '鸡', '狗', '猪'] },
			  	{ category: '黑中', animals: ['兔', '龙', '蛇', '马', '羊', '猴'] },
			  	{ category: '女肖', animals: ['兔', '蛇', '羊', '鸡', '猪'] },
			  	{ category: '男肖', animals: ['鼠', '牛', '虎', '龙', '马', '猴', '狗'] },
			  	{ category: '三合', animals: ['鼠龙猴', '牛蛇鸡', '虎马狗', '兔羊猪'] },
			  	{ category: '六合', animals: ['鼠牛', '龙鸡', '虎猪', '蛇猴', '兔狗', '马羊'] },
			  	{ category: '琴', animals: ['兔蛇鸡'] },
			  	{ category: '棋', animals: ['鼠牛狗'] },
			  	{ category: '书', animals: ['虎龙马'] },
			  	{ category: '画', animals: ['羊猴猪'] },
			  	{ category: '五福肖', animals: ['鼠', '虎', '兔', '蛇', '猴', '龙'] },
			  	{ category: '红肖', animals: ['马', '兔', '鼠', '鸡'] },
			  	{ category: '蓝肖', animals: ['蛇', '虎', '猪', '猴'] },
			  	{ category: '绿肖', animals: ['羊', '龙', '牛', '狗'] }
			  ]
		  }
	  },
	  mounted() {
		  this.initConfig();
	  },
	  methods: {
		  initConfig(){
			  var zodiac = this.list.zodiac;
			  var ball = this.list.ball;
			  var animals = [];
			  zodiac.forEach(item=>{
				  var tmp = {
					  name 	: item.title,
					  image : item.thumb,
					  chong : '冲 ' + item.restraint,
					  numbers	: []
				  };
				  ball.forEach(vl=>{
					  if(item.title == vl.title) {
						  var tmpBall = {
							  value : vl.nub,
							  color : vl.color,
						  };
						  tmp.numbers.push(tmpBall);
					  }
				  });
				  animals.push(tmp);
			  });
			  this.animals = animals;
		  }
	  }
};
</script>

<style lang="scss" scoped>
@import "@/static/css/common.css";


// 2024年属性知识
.zodiac-title {
	display: flex;
	align-items: center;
}
.zodiac-numbers text {
	height: 18px;
	line-height: 18px;
	margin: 0 2px;
	padding: 0 2px;
	font-size: 12px;
	color: #fff;
	display: inline-block;
}
.zodiac-title img {
	margin-left: 5px;
}

.red {
	background-color: #ff0000;
	color: #fff;
}

.blue {
	background-color: #3366ff;
	color: #fff;
}

.green {
	background-color: #008000;
	color: #fff;
}

.grad {
	padding: 10rpx 0;
	margin-bottom: 20rpx;
}

.bgcolor {
	background: #f1f1f1;
}

.element-row .u-col {
	// margin-bottom: 20px;
	text-align: center;
	// border-left: 1px solid #c0c0c0;
}

.element-title {
	font-weight: bold;
	padding: 10rpx 0;
	text-align: center;
}

.numbers-container text {
	margin: 0 2px;
	padding: 0 2px;
	font-size: 28rpx;
	color: #fff;
	display: inline-block;
}

.zodiacAttributes text {
	margin: 0 2px;
	padding: 0 2px;
	font-size: 28rpx;
	display: inline-block;
}

.wave-colors {
	padding: 10rpx;
	border-left: 1px solid #c0c0c0;
}

.centent8 .u-row {
	border-top: none;
	height: auto;
}

.column-with-divider::after {
	height: 100%;
	content: '';
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background-color: #ccc; /* 分隔线颜色 */
}
.column-with-divider {
	position: relative; /* 为了定位伪元素 */
}
</style>
